<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!--引入vue-->
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {{ message }},{{other.message}}
            <h1>插值语法</h1>
            <a v-bind:href="url">跳转百度</a>
            <a :href="url">跳转百度-简写方式</a>
          </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            var app = new Vue({
                          el: '#app',
                          data: {
                                message: 'Hello Vue!1',
                                url:"http://baidu.com",
                                other:{
                                    message: '你好'

                                }
                         }
                        })
            

        </script>
        

        <div id="dataattach">
            <h1>创建绑定vue第二种方法</h1>
            <h2>绑定： {{message}}</h2>
        </div>
        <script type="text/javascript">
            var dataattach = new Vue({
                message:"测试绑定",
                        data: {
                                message: 'Hello Vue!2',
                        }
                        })
                        // dataattach.$mount('#dataattach')
            setTimeout(() => {
                dataattach.$mount('#dataattach')

            },3000)
            

        </script>

        
        <div id="databind">
            <h1>数据绑定</h1>
             <!-- document.querySelector("input").value 控制台验证 -->
            单向绑定输入： <input type="text" v-bind:value="message"></input><br/>
            双向绑定输入： <input type="text" v-model:value="message"></input><br/>
            <!-- 双向绑定输入： <input type="text" v-model="message"></input><br/>-->

        </div>
        <script type="text/javascript">
            var databind = new Vue({
                        el: '#databind',
                        data: {
                                message: 'Hello Vue!1',
                        }
                        })
            

        </script>
    </body>
</html>